<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Array as Data</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]; // <- A

    var colorScale = d3.scale.linear()
        .domain([0, 100])
        .range(["#add8e6", "blue"]); // <- B

    function render(data) {
        //enter
        d3.select("body").selectAll("div.h-bar").data(data)
            .enter()
            .append("div")
            .attr("class","h-bar")
            .append("span");

        //update
        d3.select("body").selectAll("div.h-bar").data(data)
            .style("width",function (d) {
                return d*10+"px";
            })
            .style("background-color",function (d) {
                return colorScale(d);
            })
            .select("span")
            .text(function (d) {
                return d;
            });

        //exit
        d3.select("body").selectAll("div.h-bar")
            .data(data).exit().remove();
    }

    setInterval(function () {
        data.shift();  //delete the first element
        data.push(Math.round(Math.random()*100));
        render(data);
    },1000);

    render(data);

</script>

</body>

</html>